<template>
	<view class="main">
		<view class="logo">
			<image src="../../static/images/logo.png"></image>
		</view>
		<view class="content">
			<view class="top">
				<view class="title">快捷登录</view>
				<view class="des">您好，欢迎来到比特量化</view>
				<u-form :model="form" ref="uForm">
					<u-form-item prop="mobile">
						<u-input v-model="form.mobile" type="number" maxlength="11" @input="telBlur" placeholder="请输入手机号码"/>
					</u-form-item>
					<u-form-item prop="verify_code">
						<view class="code">
							<u-input v-model="form.verify_code" placeholder="请输入验证码" />
							<view class="seconds">
								<u-button size="mini" @click="getCode">{{codeText}}</u-button>
								<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
							</view>
						</view>
					</u-form-item>
					<u-form-item prop="referee" v-show="!islogin">
						<u-input v-model="form.referee" placeholder="请输入邀请码"/>
					</u-form-item>
				</u-form>
				<tfgg-verify @result='verifyResult' ref="verifyElement"></tfgg-verify>
				<view class="submit">
					<u-button :loading="loading" @click="submit">{{islogin?'登录':'注册'}}</u-button>
					<text>未注册的手机号验证后可自动登录</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	import tfggVerify from "@/components/tfgg-verify/tfgg-verify.vue";
	export default {
		components: {
			"tfgg-verify":tfggVerify
		},
		data() {
			return {
				loading:false,
				codeText: '获取验证码',//获取验证码
				islogin:true,
				ischeckMobile:false,
				form: {
					mobile: '',//手机号
					verify_code: '',//验证码
					referee:'',//推荐码
				},
				rules: {
					mobile: [
						{ 
							required: true, 
							message: '请输入手机号', 
							trigger: ['change','blur'],
						}
					],
					verify_code: [
						{
							required: true,
							message: '请输入验证码', 
							trigger: ['change','blur'],
						}
					],
					referee: [
						{
							required: false,
							message: '请输入推荐码', 
							trigger: ['change','blur'],
						}
					]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		onShow() {
			
		},
		methods: {
			// 验证手机号
			telBlur(e){
				// console.log(e)
				if(this.form.mobile && e.length>=11){
					this.$http({
						url:this.$api.checkMobile,
						method:'get',
						hideLoading:true,
						data:{
							mobile:this.form.mobile,
						},
						success:res=>{
							console.log('验证手机号----------',res)
							this.ischeckMobile = true
							if(res.code==1){
								this.islogin = false
								this.rules.referee[0].required = true
							}else if(res.code==200){
								this.islogin = true
								this.rules.referee[0].required = false
							}
						},
						fail:err=>{
							
						},complete:e=>{
							
						}
					})
				}
			},
			verifyResult(res){
			    if(res){
			        this.$refs.verifyElement.reset();//校验成功重置插件
			        console.log('验证成功')
			    }
				this.sendMessage(this.form.mobile)
			    console.log(res);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						let url = this.islogin?this.$api.authLogin:this.$api.register
						let data = {}
						if(!this.islogin){
							data={
								mobile:this.form.mobile,
								verify_code:this.form.verify_code,
								referee:this.form.referee
							}
						}else{
							data={
								loginId:this.form.mobile,
								password:this.form.verify_code
							}
						}
						this._submit(url,data)
					} else {
						console.log('验证失败');
					}
				});
			},
			_submit(url,data){
				this.loading = true
				this.$http({
					url:url,
					method:'POST',
					hideLoading:true,
					data:data,
					success:res=>{
						console.log('登录接口返回----------',res.data.token)
						if(res.code==201){
							uni.setStorage({
							    key: 'token',
							    data: res.data.token,
							    success: function () {
							        uni.switchTab({
							            url: '/pages/index/index'
							        });
							    },fail:err => {
							    	console.log('登录或者注册存储失败-----',err)
									this.form.mobile=''
									uni.showToast({
									    title:this.islogin?'登录失败请重新登录':'注册失败请重新注册',
									    duration: 2000,
										icon:'none'
									});
							    }
							});
							
						}
					},
					fail:err=>{
						
					},complete:e=>{
						this.loading = false
						uni.hideLoading();
					}
				})
			},
			//获取验证码
			codeChange(text) {
				this.codeText = text
			},
			getCode() {
				console.log('是否可发送-----',this.ischeckMobile)
				if(!this.ischeckMobile){
					this.$u.toast('正在验证手机号请稍后');
					return
				}
				if(!this.form.mobile){
					this.$u.toast('手机号格式不正确');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// uni.showLoading({
					// 	title: '正在获取验证码'
					// })
					this.$refs.verifyElement.show();
					
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			// 发送验证码
			sendMessage(e){
				this.$http({
					url:this.$api.shayuSms,
					method:'POST',
					hideLoading:true,
					data:{
						mobile:e,
					},
					success:res=>{
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
						console.log('短信验证码----------',res)
					},
					fail:err=>{
						
					},complete:e=>{
						uni.hideLoading();
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main{
		.logo{
			margin: 92rpx 0;
			text-align: center;
			image{
				width: 126rpx;
				height: 162rpx;
			}
		}
		.content{
			padding: 0 30rpx;
			.top{
				.title{
					font-size: 48rpx;
					font-family: $G-fm;
					font-weight: 600;
					color: #333333;
					line-height: 74rpx;
				}
				.des{
					margin-top: 16rpx;
					font-size: 32rpx;
					font-family: $G-fm;
					font-weight: 500;
					color: #989BA4;
					line-height: 50rpx;
				}
			}
			.code{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.u-input{
					width: calc(100% - 200rpx);
				}
				.seconds{
					width: 200rpx;
					text-align: right;
					button{
						font-size: 30rpx;
						font-family: $G-fm;
						font-weight: 400;
						color: #2F73FD;
						line-height: 42rpx;
					}
					/deep/.u-hairline-border:after{
						border: 0;
					}
				}
			}
			/deep/.u-form-item{
				padding-top: 40rpx;
			}
			/deep/.u-form-item__message{
				position: absolute;
				top:0;
				left: 0;
				padding-left: 0!important;
			}
			.submit{
				text-align: center;
				button{
					width: 670rpx;
					height: 80rpx;
					background: #2F73FD;
					box-shadow: 0px 4rpx 8rpx 0px #A6C4FF;
					border-radius: 45rpx;
					font-size: 34rpx;
					font-family: $G-fm;
					font-weight: 600;
					color: #FBFBFB;
					line-height: 48rpx;
					margin-top: 76rpx;
				}
				text{
					display: inline-block;
					padding-top: 20rpx;
				}
			}
		}
	}
</style>
